var React = require('react');


var Bheader = require('../widget/Bheader');
var Footer = require('../widget/Footer');
var ajax = require('../tools/ajax');
var Icon = require('../components/Icon');

module.exports = React.createClass({
    getInitialState: function () {
        return {
            theme:"Default",//Default/Blue
            Id:"",
            flag:false,
            userInfo:[],
        }
    },
    myScroll:"",

    componentDidMount: function () {
        this.getUserInfoByUid();
        setTimeout(this.iscroll,500);
    },
    /**iScroll插件*/
    iscroll(){
        var p =this;
        p.myScroll = new IScroll("#vipWrapper",{
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        });
    },
    getUserInfoByUid(){
        var p =this;
        var userId = localStorage.getItem("userId");
        ajax("POST","getUserInfoByUid",{userId:userId},function(dt){
            if(dt&&dt.success){
                p.setState({userInfo:dt.data[0]});
            }
        })
    },
    bottom(e){
        var Id = e.currentTarget.getAttribute("data");
        switch(Id){
            case "1": this.setState({Id:"1"});break;
            case "2": this.setState({Id:"2"});break;
            case "3": this.setState({Id:"3"});break;
        }
        if(this.state.flag){
            this.setState({flag:false})
        }else{
            this.setState({flag:true})
        }
    },

    render: function () {
        var p = this;
        var userInfo = this.state.userInfo;
        return (
            <div className="main"  id="main">
                <Bheader theme={this.state.theme} title="会员尊享" headr="false" ></Bheader>
                <div id="vipWrapper" className="container-t noFooter vip">
                    <div style={{minHeight:"31.18rem"}}>
                    <img src="http://115.29.198.39:8080/upload/vip/120000757100532327.jpg" className="headPic" />
                    <ul>
                        <li>
                            <div className="pointsHead">
                                <p className="points">您的当前积分：<span className="pointsNum">{userInfo.jifen}币</span></p>
                                <p className="style"><Icon icon="#icon-phonedateicon23" className="pointsHeadIcon" />兑换记录</p>
                                <p className="style"><Icon icon="#icon-jifenguize" className="pointsHeadIcon" />积分规则</p>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div className="vipListItem" onClick={this.bottom}  data="1">
                                    <p className="p1">新手专属</p>
                                    <p className="p2">新人专享好礼</p>
                                    <div className={this.state.Id=="1"?(this.state.flag?"bottomIcon top":"bottomIcon"):"bottomIcon"}>
                                        <Icon icon="#icon-fanhui" />
                                    </div>
                                </div>
                                <div className="description" style={{display:this.state.Id=="1"?(this.state.flag?"block":"none"):"none"}}>
                                    <p>1、首次注册APP下单满减活动</p>
                                    <p>2、新人享受部分商品优惠</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div className="vipListItem" onClick={this.bottom}  data="2">
                                    <p className="p1">评论奖励</p>
                                    <p className="p2">评论送积分，积分当钱花</p>
                                    <div className={this.state.Id=="2"?(this.state.flag?"bottomIcon top":"bottomIcon"):"bottomIcon"}>
                                        <Icon icon="#icon-fanhui" />
                                    </div>
                                </div>
                                <div className="description" style={{display:this.state.Id=="2"?(this.state.flag?"block":"none"):"none"}}>
                                    <p>1、评价线下购物，获取相应积分</p>
                                    <p>2、拍照上传，成功评价一单获得20积分</p>
                                 </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div className="vipListItem" onClick={this.bottom} data="3">
                                    <p className="p1">生日专享</p>
                                    <p className="p2">多重礼包为您庆生</p>
                                    <div className={this.state.Id=="3"?(this.state.flag?"bottomIcon top":"bottomIcon"):"bottomIcon"}>
                                        <Icon icon="#icon-fanhui" />
                                    </div>
                                </div>
                                <div className="description" style={{display:this.state.Id=="3"?(this.state.flag?"block":"none"):"none"}}>
                                    <p>1、会员生日当天本店商品打八折</p>
                                    <p>2、会员生日当天入店领一份小礼包</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                </div>
            </div>
        )
    }
});
